<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>

    <tab-controller
      class="tab-controller1"
      :titles="['流行', '新款', '精选']"
      @tabClick="tabClick"
      v-show="-position > tabControllerOffsetTop"
      ref="tabController1"
    ></tab-controller>

    <scroll class="content" ref="scroll">
      <home-swiper :banners="banners"></home-swiper>
      <home-recommend :recommends="recommends"></home-recommend>
      <home-feature-view></home-feature-view>
      <tab-controller
        class="tab-controller2"
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
        ref="tabController2"
      ></tab-controller>
      <goods-list
        :isDetailMsg="true"
        id="goods-list"
        :goods="showGoods"
      ></goods-list>
    </scroll>

    <back-top v-if="-position > 500" @click.native="backClick"></back-top>
  </div>
</template>

<script>
import HomeSwiper from "./childComps/HomeSwiper.vue";
import HomeRecommend from "./childComps/HomeRecommend.vue";
import HomeFeatureView from "./childComps/HomeFeatureView.vue";

import NavBar from "../../components/common/navigationbar/NavBar.vue";
import TabController from "../../components/common/tabController/TabController.vue";
import Scroll from "../../components/common/scroll/scroll.vue";

import { getHomeMultidata, getHomeGoods } from "../../network/home";
import GoodsList from "../../components/content/goods/GoodsList.vue";
import BackTop from "../../components/content/backTop/BackTop.vue";

export default {
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    HomeFeatureView,
    TabController,
    GoodsList,
    Scroll,
    BackTop,
  },
  name: "Home",
  data() {
    return {
      position: 0,
      banners: [],
      recommends: [],
      currentType: "pop",
      tabControllerOffsetTop: 0,
      saveY: 0,
      goods: {
        pop: {
          page: 0,
          list: [],
        },
        new: {
          page: 0,
          list: [],
        },
        sell: {
          page: 0,
          list: [],
        },
      },
    };
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  activated() {
    this.$refs.scroll.refresh();
    this.$refs.scroll.toTop(0, this.saveY, 0);
  },
  deactivated() {
    this.saveY = this.position;
  },
  created() {
    // 1、请求多个数据
    this.getHomeMultidata();
    this.getHomeGoods("new");
    this.getHomeGoods("pop");
    this.getHomeGoods("sell");
  },
  mounted() {
    this.$refs.scroll.scroll.on("scroll", (position) => {
      this.position = position.y;
    });

    this.$refs.scroll.scroll.on("pullingUp", () => {
      this.getHomeGoods(this.currentType);
    });

    const ref = this.antishake(this.$refs.scroll.refresh, 200);
    //事件总线 监听图片加载
    this.$bus.$on("imgLoad", () => {
      ref();
    });

    //吸顶效果
    setTimeout(() => {
      this.tabControllerOffsetTop =
        this.$refs.tabController2.$el.offsetTop - 44;
    }, 200);
  },

  methods: {
    //防抖函数
    antishake(func, time) {
      let Itime = null;
      return function () {
        if (Itime) clearInterval(Itime);
        Itime = setTimeout(() => {
          func();
        }, time);
      };
    },

    //网络请求方法
    getHomeGoods(type) {
      var pageSum = this.goods[type].page + 1;
      getHomeGoods(type, pageSum).then((res) => {
        //解构语法    如果不熟悉该语法可以使用for一个个push
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page += 1;

        //防止频繁刷新上拉
        // setTimeout(()=>{
        this.$refs.scroll.scroll.finishPullUp();
        //   console.log('不可以刷新');
        // },2000)
      });
    },
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },

    //事件监听方法
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tabController1.currentIndex = index;
      this.$refs.tabController2.currentIndex = index;
    },
    backClick() {
      this.$refs.scroll.toTop(0, 0, 500);
    },
  },
};
</script>


<style scoped>
.content {
  /* 方法一 */
  height: calc(100% - 93px);
  margin-top: 44px;

  /* 方法二 */
  /* position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0; */
}

#home {
  height: 100vh;
}

.tab-controller1 {
  background: #fff;
  position: fixed;
  z-index: 10;
  top: 44px;
  left: 0;
  width: 100%;
}

.tab-controller2 {
  background: #fff;
  margin-bottom: 15px;
}

.home-nav {
  background-color: palevioletred;
  color: white;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
}
</style>